<template>
	<div class="wrapper">
		<swiper :options="swiperOption">
	    <swiper-slide>
	    	<img src="../../../images/index/banner1.jpg" class="swiper-img"/>
	    </swiper-slide>
	    <swiper-slide>
	    	<img src="../../../images/index/banner2.jpg" class="swiper-img"/>
	    </swiper-slide>
	    <swiper-slide>
	    	<img src="../../../images/index/banner3.jpg" class="swiper-img"/>
	    </swiper-slide>
	    <div class="swiper-pagination"  slot="pagination"></div>
	  </swiper>
	</div> 
</template>

<script>
	export default {
		name:'HomeSwiper',
		data (){
			return{
				swiperOption:{
					pagination: '.swiper-pagination',
					loop: true
				},
			}
		}
	}
</script>

<style lang="stylus" scoped>
	.wrapper >>> .swiper-pagination-bullet-active{
		background: #fff;
	}
	.wrapper{
		overflow: hidden;
		width: 100%;
		height: 0;
		padding-bottom: 26.66%;
		background: #ccc;
	}
	.swiper-img{
		width: 100%;
	}
</style>